<template>
    <div class="app-container">
        <div class="Search">
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="query">
                             <el-form-item v-has="'PLATFROM_TENANT_QUERY'">
                <el-cascader  ref="tenantTree" placeholder="所属租户" :props="tenantProps" :options="tenantOptions" @change="selectTenant" clearable collapse-tags filterable></el-cascader>
            </el-form-item>

             <el-form-item>
                 <el-cascader ref="organTree" placeholder="所属组织" :props="props" :options="organOptions" @change="selectOrgan" collapse-tags clearable filterable></el-cascader>
            </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.id" placeholder="编号主键"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.parentId" placeholder="上级编号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.tenantId" placeholder="租户编号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.organId" placeholder="组织编号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.storeId" placeholder="商铺编号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.createBy" placeholder="创建者"/>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.createDate" type="date" placeholder="生成时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.createDate" type="date" placeholder="生成时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.updateBy" placeholder="更新者"/>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.updateDate" type="date" placeholder="更新时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.updateDate" type="date" placeholder="更新时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.organPath" placeholder="组织路径"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.orderId" placeholder="订单编号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.orderDetailId" placeholder="订单详情编号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.refundOrderId" placeholder="退款单号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.remark" placeholder="备注"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </div>

        <div class="block">
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    element-loading-text="Loading"
                    border
                    fit
                    highlight-current-row
            >
                <el-table-column align="center" label="序号" width="95">
                    <template slot-scope="scope">
                        {{ scope.$index }}
                    </template>
                </el-table-column>
                <el-table-column label="编号主键" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column label="上级编号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.parentId }}
                    </template>
                </el-table-column>
                <el-table-column label="租户编号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.tenantId }}
                    </template>
                </el-table-column>
                <el-table-column label="组织编号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.organId }}
                    </template>
                </el-table-column>
                <el-table-column label="商铺编号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.storeId }}
                    </template>
                </el-table-column>
                <el-table-column label="创建者" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.createBy }}
                    </template>
                </el-table-column>
                <el-table-column label="生成时间" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.createDate }}
                    </template>
                </el-table-column>
                <el-table-column label="更新者" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.updateBy }}
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.updateDate }}
                    </template>
                </el-table-column>
                <el-table-column label="组织路径" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.organPath }}
                    </template>
                </el-table-column>
                <el-table-column label="删除标识" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.isDeleted }}
                    </template>
                </el-table-column>
                <el-table-column label="订单编号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.orderId }}
                    </template>
                </el-table-column>
                <el-table-column label="订单详情编号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.orderDetailId }}
                    </template>
                </el-table-column>
                <el-table-column label="退款单号" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.refundOrderId }}
                    </template>
                </el-table-column>
                <el-table-column label="借贷标识，0为借(借出)，1为贷（贷入）" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.borrowingMark }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.remark }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-search" size="mini"
                                   @click="handleEdit(scope.$index, scope.row)">修改
                        </el-button>
                        <el-button type="danger" icon="el-icon-plus" size="mini"
                                   @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="block">
            <el-pagination
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <div class="block">
            <!--弹框-->
            <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="DailyJourRules" ref="DailyJourForm">
                    <el-form-item label="编号主键" required prop="id">
                        <el-input v-model="form.id" placeholder="编号主键" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="上级编号" required prop="parentId">
                        <el-input v-model="form.parentId" placeholder="上级编号" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="租户编号" required prop="tenantId">
                        <el-input v-model="form.tenantId" placeholder="租户编号" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="组织编号" required prop="organId">
                        <el-input v-model="form.organId" placeholder="组织编号" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="商铺编号" required prop="storeId">
                        <el-input v-model="form.storeId" placeholder="商铺编号" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="创建者" required prop="createBy">
                        <el-input v-model="form.createBy" placeholder="创建者" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="生成时间" required prop="createDate">
                        <el-date-picker v-model="form.createDate" type="date" placeholder="生成时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="更新者" required prop="updateBy">
                        <el-input v-model="form.updateBy" placeholder="更新者" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="更新时间" required prop="updateDate">
                        <el-date-picker v-model="form.updateDate" type="date" placeholder="更新时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="组织路径" required prop="organPath">
                        <el-input v-model="form.organPath" placeholder="组织路径" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="订单编号" required prop="orderId">
                        <el-input v-model="form.orderId" placeholder="订单编号" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="订单详情编号" required prop="orderDetailId">
                        <el-input v-model="form.orderDetailId" placeholder="订单详情编号" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="退款单号" required prop="refundOrderId">
                        <el-input v-model="form.refundOrderId" placeholder="退款单号" auto-complete="off"/>
                    </el-form-item>
                    <el-form-item label="备注" required prop="remark">
                        <el-input v-model="form.remark" placeholder="备注" auto-complete="off"/>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEditSave">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    </div>

</template>

<script>
    import {getList, doDelete, doEdit} from '@/api/DailyJour/'

    export default {
        data() {
            return {
                list: null,
                listLoading: true,
                total: 5,
                currentPage: 1,
                pageSize: 10,
                dialogFormVisible: false,
                addForVisible: false,
                form: {
                    id: '',
                    parentId: '',
                    tenantId: '',
                    organId: '',
                    storeId: '',
                    createBy: '',
                    createDate: '',
                    updateBy: '',
                    updateDate: '',
                    organPath: '',
                    isDeleted: '',
                    orderId: '',
                    orderDetailId: '',
                    refundOrderId: '',
                    borrowingMark: '',
                    remark: ''
                },
                // 新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
                titleMap: {
                    add: '新增',
                    edit: '编辑'
                },
                DailyJourRules: {
                    id: [{required: true, message: '编号主键不能为空!', trigger: 'blur'}], //编号主键
                ,
                parentId: [{required: true, message: '上级编号不能为空!', trigger: 'blur'}], //上级编号
                ,
                tenantId
        :
            [{required: true, message: '租户编号不能为空!', trigger: 'blur'}], //租户编号
                ,
                organId
        :
            [{required: true, message: '组织编号不能为空!', trigger: 'blur'}], //组织编号
                ,
                storeId
        :
            [{required: true, message: '商铺编号不能为空!', trigger: 'blur'}], //商铺编号
                ,
                createBy
        :
            [{required: true, message: '创建者不能为空!', trigger: 'blur'}], //创建者
                ,
                createDate
        :
            [{required: true, message: '生成时间不能为空!', trigger: 'blur'}], //生成时间
                ,
                updateBy
        :
            [{required: true, message: '更新者不能为空!', trigger: 'blur'}], //更新者
                ,
                updateDate
        :
            [{required: true, message: '更新时间不能为空!', trigger: 'blur'}], //更新时间
                ,
                organPath
        :
            [{required: true, message: '组织路径不能为空!', trigger: 'blur'}], //组织路径
                ,
                isDeleted
        :
            [{required: true, message: '删除标识不能为空!', trigger: 'blur'}], //删除标识
                ,
                orderId
        :
            [{required: true, message: '订单编号不能为空!', trigger: 'blur'}], //订单编号
                ,
                orderDetailId
        :
            [{required: true, message: '订单详情编号不能为空!', trigger: 'blur'}], //订单详情编号
                ,
                refundOrderId
        :
            [{required: true, message: '退款单号不能为空!', trigger: 'blur'}], //退款单号
                ,
                borrowingMark
        :
            [{required: true, message: '借贷标识，0为借(借出)，1为贷（贷入）不能为空!', trigger: 'blur'}], //借贷标识，0为借(借出)，1为贷（贷入）
                ,
                remark
        :
            [{required: true, message: '备注不能为空!', trigger: 'blur'}], //备注
        },
            // 新增和编辑弹框标题
            dialogStatus: '',
            props: { // 配置项（必选）
                    value: 'id',
                    label: 'organName',
                    children: 'children',
                    checkStrictly: true,
                    title: '组织'
                    // disabled:true
            },
            optionData: [{id: '1', parentId: '2', organName: '平台', children: []}],
                // 新增和编辑弹框标题
            query: {
                params: {
                    id:'', //编号主键,
                        parentId
                :
                    '', //上级编号,
                        tenantId
                :
                    '', //租户编号,
                        organId
                :
                    '', //组织编号,
                        storeId
                :
                    '', //商铺编号,
                        createBy
                :
                    '', //创建者,
                        createDate
                :
                    '', //生成时间,
                        updateBy
                :
                    '', //更新者,
                        updateDate
                :
                    '', //更新时间,
                        organPath
                :
                    '', //组织路径,
                        isDeleted
                :
                    '', //删除标识,
                        orderId
                :
                    '', //订单编号,
                        orderDetailId
                :
                    '', //订单详情编号,
                        refundOrderId
                :
                    '', //退款单号,
                        borrowingMark
                :
                    '', //借贷标识，0为借(借出)，1为贷（贷入）,
                        remark
                :
                    '' //备注,

                }
            ,
                timeValue: '',
                    options
            :
                [{
                    value: '1',
                    label: '黄金糕'
                }, {
                    value: '2',
                    label: '双皮奶'
                }],
                    value
            :
                ''
            }
        }
        },
        created() {
            this.initOrganTree()
            this.fetchData()
        },
        methods: {
            fetchData() {
                this.listLoading = true
                getList(this.query.params, this.currentPage, this.pageSize).then(response => {
                    const data = response.data
                    this.total = data.totalCount
                    this.pageSize = data.pageSize
                    this.currentPage = data.currentPage
                    this.list = data.entities
                    this.listLoading = false
                })
            },
            initOrganTree() {
                this.listLoading = true
                querySubordinateOrgan({organId: getOrganId()}).then(response => {
                    console.log(response)
                const data = response.data
                this.optionData = handleBuildTreeDataStruct(data, 'id', 'parentId')
                this.listLoading = false
            })
            },
            handleSizeChange(val) {
                this.currentPage = 1
                this.pageSize = val
                this.fetchData()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.fetchData()
            },
            // 新增
            handleAdd() {
                // 显示弹框
                this.dialogFormVisible = true
                // 新增弹框标题
                this.dialogStatus = 'add'

                this.form.id = ''
                this.form.parentId = ''
                this.form.tenantId = ''
                this.form.organId = ''
                this.form.storeId = ''
                this.form.createBy = ''
                this.form.createDate = ''
                this.form.updateBy = ''
                this.form.updateDate = ''
                this.form.organPath = ''
                this.form.isDeleted = ''
                this.form.orderId = ''
                this.form.orderDetailId = ''
                this.form.refundOrderId = ''
                this.form.borrowingMark = ''
                this.form.remark = ''
                this.addForVisible = false
            },
            // 编辑
            handleEdit(index, row) {
                console.log(index)
                console.log(row)
                this.form.id = row.id
                this.form.parentId = row.parentId
                this.form.tenantId = row.tenantId
                this.form.organId = row.organId
                this.form.storeId = row.storeId
                this.form.createBy = row.createBy
                this.form.createDate = row.createDate
                this.form.updateBy = row.updateBy
                this.form.updateDate = row.updateDate
                this.form.organPath = row.organPath
                this.form.isDeleted = row.isDeleted
                this.form.orderId = row.orderId
                this.form.orderDetailId = row.orderDetailId
                this.form.refundOrderId = row.refundOrderId
                this.form.borrowingMark = row.borrowingMark
                this.form.remark = row.remark
                this.addForVisible = true
                // 显示弹框
                this.dialogFormVisible = true
                // 编辑弹框标题
                this.dialogStatus = 'edit'
            },
            handleDelete(index, row) {
                console.log(index)
                console.log(row)

                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    doDelete(row.id
            ).
                then(response => {
                    const data = response.data
                    console.log(data)
                if (data.status == 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    })
                    this.fetchData();
                } else if (data.status == 403) {
                    this.$message({
                        type: 'warning',
                        message: data.description
                    })
                } else {
                    this.$message({
                        type: 'info',
                        message: '操作失败!'
                    })
                }
            })
            }).
                catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
            },
            handleEditSave() {
                debugger

                doEdit(this.form).then(response => {
                    debugger
                        console.log(response)
                    const data = response.data
                    if(data.status
            )
                {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    })
                    this.fetchData();
                }
            else
                {
                    this.$message({
                        type: 'info',
                        message: '操作失败!'
                    })
                }
                this.listLoading = false
                this.dialogFormVisible = false
            })
            },
            handleReset() {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            selectOrgan(nodes) {
                let nodesInfo = this.$refs['organTree'].getCheckedNodes()
                // this.query.params.organPath = nodesInfo[0].data.organPath
                console.log(nodesInfo)
                this.query.params.organId = nodesInfo[0].data.id

            }
        }
    }
</script>
